<form [formGroup]="formGroup()" class="form-group edit-form">
  <div class="content-block">
    <span class="category-title" [translate]="'SPELL_DBC.FLAGS.GENERAL'"></span>
    <div class="row">
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="TargetCreatureType">TargetCreatureType</label>
        <keira-flags-selector-btn
          [control]="formGroup().controls.TargetCreatureType"
          [disabled]="formGroup().controls.TargetCreatureType.disabled"
          [config]="{ flags: SPELL_DBC_CREATURE_TYPE_FLAGS, name: 'TargetCreatureType' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.FLAGS.TARGET_CREATURE_TYPE' | translate"></i>
        <input [formControlName]="'TargetCreatureType'" id="TargetCreatureType" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ShapeshiftMask">ShapeshiftMask</label>
        <keira-flags-selector-btn
          [control]="formGroup().controls.ShapeshiftMask"
          [disabled]="formGroup().controls.ShapeshiftMask.disabled"
          [config]="{ flags: SPELL_DBC_STANCES_FLAGS, name: 'ShapeshiftMask' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.FLAGS.SHAPESHIFT_MASK' | translate"></i>
        <input [formControlName]="'ShapeshiftMask'" id="ShapeshiftMask" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ShapeshiftExclude">ShapeshiftExclude</label>
        <keira-flags-selector-btn
          [control]="formGroup().controls.ShapeshiftMask"
          [disabled]="formGroup().controls.ShapeshiftMask.disabled"
          [config]="{ flags: SPELL_DBC_STANCES_FLAGS, name: 'ShapeshiftMask' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.FLAGS.SHAPESHIFT_EXCLUDE' | translate"></i>
        <input [formControlName]="'ShapeshiftExclude'" id="ShapeshiftExclude" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="FacingCasterFlags">FacingCasterFlags</label>
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.FLAGS.FACING_CASTER_FLAGS' | translate"></i>
        <keira-flags-selector-btn
          [control]="formGroup().controls.FacingCasterFlags"
          [disabled]="formGroup().controls.FacingCasterFlags.disabled"
          [config]="{ flags: SPELL_DBC_FACING_FRONT_FLAG, name: 'FacingCasterFlags' }"
        />
        <input [formControlName]="'FacingCasterFlags'" id="FacingCasterFlags" type="number" class="form-control form-control-sm" />
      </div>
    </div>
  </div>
  <div class="content-block">
    <span class="category-title" [translate]="'SPELL_DBC.FLAGS.INTERRUPT_FLAGS'"></span>
    <div class="row">
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="InterruptFlags">InterruptFlags</label>
        <keira-flags-selector-btn
          [control]="formGroup().controls.InterruptFlags"
          [disabled]="formGroup().controls.InterruptFlags.disabled"
          [config]="{ flags: SPELL_DBC_INTERRUPT_FLAGS, name: 'InterruptFlags' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.FLAGS.INTERRUPT_FLAGS_TOOLTIP' | translate"></i>
        <input [formControlName]="'InterruptFlags'" id="InterruptFlags" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="AuraInterruptFlags">AuraInterruptFlags</label>
        <keira-flags-selector-btn
          [control]="formGroup().controls.AuraInterruptFlags"
          [disabled]="formGroup().controls.AuraInterruptFlags.disabled"
          [config]="{ flags: SPELL_DBC_AURA_INTERRUPT_FLAGS, name: 'AuraInterruptFlags' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.FLAGS.AURA_INTERRUPT_FLAGS' | translate"></i>
        <input [formControlName]="'AuraInterruptFlags'" id="AuraInterruptFlags" type="number" class="form-control form-control-sm" />
      </div>
      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
        <label class="control-label" for="ChannelInterruptFlags">ChannelInterruptFlags</label>
        <keira-flags-selector-btn
          [control]="formGroup().controls.ChannelInterruptFlags"
          [disabled]="formGroup().controls.ChannelInterruptFlags.disabled"
          [config]="{ flags: SPELL_DBC_CHANNEL_INTERRUPT_FLAGS, name: 'ChannelInterruptFlags' }"
          [modalClass]="'modal-md'"
        />
        <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.FLAGS.CHANNEL_INTERRUPT_FLAGS' | translate"></i>
        <input [formControlName]="'ChannelInterruptFlags'" id="ChannelInterruptFlags" type="number" class="form-control form-control-sm" />
      </div>
    </div>
  </div>
  <div class="content-block">
    <span class="category-title" [translate]="'SPELL_DBC.FLAGS.SPELL_ATTRIBUTES'"></span>
    <div class="row">
      @for (suffix of ['', 'Ex', 'Ex2', 'Ex3', 'Ex4', 'Ex5', 'Ex6', 'Ex7']; track suffix) {
        <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
          <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.FLAGS.ATTRIBUTES' | translate"></i>
          <keira-flags-selector-btn
            [control]="formGroup().controls['Attributes' + suffix]"
            [disabled]="formGroup().controls['Attributes' + suffix].disabled"
            [config]="{ flags: SPELL_DBC_ATTRIBUTES_FLAGS[suffix], name: 'Attributes' + suffix }"
            [modalClass]="'modal-md'"
          />
          <label class="control-label" [for]="'Attributes' + suffix">Attributes{{ suffix }}</label>
          <input
            [formControlName]="'Attributes' + suffix"
            [id]="'Attributes' + suffix"
            type="number"
            class="form-control form-control-sm"
          />
        </div>
      }
    </div>
  </div>
</form>
